<!doctype html><html class="" data-reactroot=""><head>
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-react-helmet="true" property="og:title" content="React-router5 中文文档"/><meta data-react-helmet="true" property="og:description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
<title data-react-helmet="true">React-router5 中文文档</title>
<link data-react-helmet="true" rel="stylesheet" href="/react_router_chinese/assets/index.css"/><link data-react-helmet="true" id="prismTheme" rel="stylesheet" href="/react_router_chinese/assets/prism.css"/>
<script data-react-helmet="true" >
    const shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (shouldSetIsDark) {
      document.documentElement.classList.add('is_dark');
      document.getElementById('prismTheme').href = "/react_router_chinese/assets/prism_tomorrow.css";
    }
  </script>
</head><body><header><h1 class="hide_on_mobile"><a href="/react_router_chinese/">React-router5 中文文档</a></h1><nav><ul><li class="show_on_mobile flex_center"><a class="czs-menu-l" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-menu-l.svg&quot;)"></a></li><li class="show_on_mobile"><h1 class="mobile_title"><a href="/react_router_chinese/">React-router5 中文文档</a></h1></li><li style="flex-grow:1"></li><li class="flex_center"><a class="czs-github-logo" href="https://github.com/frisktale/react_router_chinese" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-github-logo.svg&quot;)"></a></li><li class="toggle_dark flex_center"><span class="czs-sun" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun.svg&quot;)"></span><span class="czs-sun-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun-l.svg&quot;)"></span><span class="czs-moon" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon.svg&quot;)"></span><span class="czs-moon-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon-l.svg&quot;)"></span></li></ul></nav></header><aside class="sidebar"><ol class="list_style_none"><li class="unfold"><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">文档<span class="czs-angle-up-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></span><span class="czs-angle-down-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-down-l.svg&quot;)"></span></a><ol class="list_style_none" style="height:auto"><li class=""><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">快速开始</a></li><li class=""><a href="/react_router_chinese/guides/BasicComponents.html" class="nav_link">基础组件</a></li><li class=""><a href="/react_router_chinese/guides/ServerRendering.html" class="nav_link">服务端渲染</a></li><li class=""><a href="/react_router_chinese/guides/CodeSplitting.html" class="nav_link">代码拆分</a></li><li class=""><a href="/react_router_chinese/guides/ScrollRestoration.html" class="nav_link">滚动恢复</a></li><li class=""><a href="/react_router_chinese/guides/Philosophy.html" class="nav_link">设计思想</a></li><li class=""><a href="/react_router_chinese/guides/Testting.html" class="nav_link active">测试</a></li><li class=""><a href="/react_router_chinese/guides/ReduxIntegration.html" class="nav_link">集成 Redux</a></li><li class=""><a href="/react_router_chinese/guides/StaticRouter.html" class="nav_link">静态路由</a></li></ol></li><li class=""><a href="/react_router_chinese/API/API.html" class="nav_link">API</a></li></ol></aside><section class="main"><div class="main_article"><article><h2 id="%E6%B5%8B%E8%AF%95">测试<a class="anchor" href="#%E6%B5%8B%E8%AF%95">§</a></h2>
<p>React Router依赖React上下文来工作。 这会影响您如何测试使用我们组件的组件。</p>
<p>如果你对应用渲染的<Link>或者<Router>组件进行单元测试，那么你会得到一些有关上下文的错误和警告信息。虽然你可能会找出自己的路由上下文的内容，我们推荐你将你的单元测试包裹在<StaticRouter>或者<MemoryRouter>中。代码如下:</p>
<pre class="language-autoit"><code class="language-autoit">class Sidebar extends Component {
  <span class="token operator">/</span><span class="token operator">/</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    return <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span>div<span class="token operator">></span>
        <span class="token operator">&lt;</span>button onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>toggleExpand}<span class="token operator">></span>
          expand
        <span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span>
        <span class="token operator">&lt;</span>ul<span class="token operator">></span>
          {users<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>user <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
            <span class="token operator">&lt;</span>li<span class="token operator">></span>
               <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span>{user<span class="token punctuation">.</span>path}<span class="token operator">></span>
                 {user<span class="token punctuation">.</span>name}
               <span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
          <span class="token punctuation">)</span><span class="token punctuation">)</span>}
        <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token punctuation">)</span>
  }
}

<span class="token operator">/</span><span class="token operator">/</span> broken
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'it expands when the button is clicked'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token function">render</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Sidebar<span class="token operator">/</span><span class="token operator">></span>
  <span class="token punctuation">)</span>
  <span class="token function">click</span><span class="token punctuation">(</span>theButton<span class="token punctuation">)</span>
  <span class="token function">expect</span><span class="token punctuation">(</span>theThingToBeOpen<span class="token punctuation">)</span>
}<span class="token punctuation">)</span>

<span class="token operator">/</span><span class="token operator">/</span> fixed!
<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'it expands when the button is clicked'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token function">render</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>MemoryRouter<span class="token operator">></span>
      <span class="token operator">&lt;</span>Sidebar<span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>MemoryRouter<span class="token operator">></span>
  <span class="token punctuation">)</span>
  <span class="token function">click</span><span class="token punctuation">(</span>theButton<span class="token punctuation">)</span>
  <span class="token function">expect</span><span class="token punctuation">(</span>theThingToBeOpen<span class="token punctuation">)</span>
}<span class="token punctuation">)</span>
</code></pre>
<h3 id="%E4%BB%8E%E7%89%B9%E5%AE%9A%E8%B7%AF%E7%94%B1%E5%BC%80%E5%A7%8B">从特定路由开始<a class="anchor" href="#%E4%BB%8E%E7%89%B9%E5%AE%9A%E8%B7%AF%E7%94%B1%E5%BC%80%E5%A7%8B">§</a></h3>
<p>&lt; MemoryRouter &gt;支持initialEntries和initialIndex 属性。因此你可以从一个特定的路径来启动你的应用（或者是从应用的一小部分)。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">"current user is active in sidebar"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token function">render</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>MemoryRouter initialEntries<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">"/users/2"</span><span class="token punctuation">]</span>}<span class="token operator">></span>
      <span class="token operator">&lt;</span>Sidebar <span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>MemoryRouter<span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token comment">;</span>
  <span class="token function">expectUserToBeActive</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token comment">;</span>
}<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<h3 id="%E5%AF%BC%E8%88%AA">导航<a class="anchor" href="#%E5%AF%BC%E8%88%AA">§</a></h3>
<p>当路径改变时我们有许多路由测试的任务，因此你可能不需要再测试这个。但是如果你必须这样做的话，既然这发生在渲染时，那么我们可以这样做：</p>
<pre class="language-autoit"><code class="language-autoit">import { render<span class="token punctuation">,</span> unmountComponentAtNode } from <span class="token string">"react-dom"</span><span class="token comment">;</span>
import React from <span class="token string">"react"</span><span class="token comment">;</span>
import { Route<span class="token punctuation">,</span> Link<span class="token punctuation">,</span> MemoryRouter } from <span class="token string">"react-router-dom"</span><span class="token comment">;</span>
import { Simulate } from <span class="token string">"react-addons-test-utils"</span><span class="token comment">;</span>

<span class="token operator">/</span><span class="token operator">/</span> a way <span class="token keyword">to</span> render any part of your app inside a MemoryRouter
<span class="token operator">/</span><span class="token operator">/</span> you pass it a list of steps <span class="token keyword">to</span> execute when the location
<span class="token operator">/</span><span class="token operator">/</span> changes<span class="token punctuation">,</span> it will call back <span class="token keyword">to</span> you <span class="token keyword">with</span> stuff like
<span class="token operator">/</span><span class="token operator">/</span> `match` <span class="token operator">and</span> `location`<span class="token punctuation">,</span> <span class="token operator">and</span> `history` so you can control
<span class="token operator">/</span><span class="token operator">/</span> the flow <span class="token operator">and</span> make assertions<span class="token punctuation">.</span>
<span class="token keyword">const</span> renderTestSequence <span class="token operator">=</span> <span class="token punctuation">(</span>{
  initialEntries<span class="token punctuation">,</span>
  initialIndex<span class="token punctuation">,</span>
  subject<span class="token punctuation">:</span> Subject<span class="token punctuation">,</span>
  steps
}<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token keyword">const</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token comment">;</span>

  class Assert extends React<span class="token punctuation">.</span>Component {
    <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
      this<span class="token punctuation">.</span><span class="token function">assert</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">;</span>
    }

    <span class="token function">componentDidUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
      this<span class="token punctuation">.</span><span class="token function">assert</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">;</span>
    }

    <span class="token function">assert</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
      <span class="token keyword">const</span> nextStep <span class="token operator">=</span> steps<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>nextStep<span class="token punctuation">)</span> {
        <span class="token function">nextStep</span><span class="token punctuation">(</span>{ <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>this<span class="token punctuation">.</span>props<span class="token punctuation">,</span> div }<span class="token punctuation">)</span><span class="token comment">;</span>
      } <span class="token keyword">else</span> {
        <span class="token function">unmountComponentAtNode</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span><span class="token comment">;</span>
      }
    }

    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
      return this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token comment">;</span>
    }
  }

  class Test extends React<span class="token punctuation">.</span>Component {
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
      return <span class="token punctuation">(</span>
        <span class="token operator">&lt;</span>MemoryRouter
          initialIndex<span class="token operator">=</span>{initialIndex}
          initialEntries<span class="token operator">=</span>{initialEntries}
        <span class="token operator">></span>
          <span class="token operator">&lt;</span>Route
            render<span class="token operator">=</span>{props <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
              <span class="token operator">&lt;</span>Assert {<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>props}<span class="token operator">></span>
                <span class="token operator">&lt;</span>Subject <span class="token operator">/</span><span class="token operator">></span>
              <span class="token operator">&lt;</span><span class="token operator">/</span>Assert<span class="token operator">></span>
            <span class="token punctuation">)</span>}
          <span class="token operator">/</span><span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>MemoryRouter<span class="token operator">></span>
      <span class="token punctuation">)</span><span class="token comment">;</span>
    }
  }

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token operator">&lt;</span>Test <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> div<span class="token punctuation">)</span><span class="token comment">;</span>
}<span class="token comment">;</span>

<span class="token operator">/</span><span class="token operator">/</span> our Subject<span class="token punctuation">,</span> the App<span class="token punctuation">,</span> but you can test any sub
<span class="token operator">/</span><span class="token operator">/</span> section of your app too
<span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span>Route
      exact
      path<span class="token operator">=</span><span class="token string">"/"</span>
      render<span class="token operator">=</span>{<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
        <span class="token operator">&lt;</span>div<span class="token operator">></span>
          <span class="token operator">&lt;</span>h1<span class="token operator">></span>Welcome<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token punctuation">)</span>}
    <span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>Route
      path<span class="token operator">=</span><span class="token string">"/dashboard"</span>
      render<span class="token operator">=</span>{<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
        <span class="token operator">&lt;</span>div<span class="token operator">></span>
          <span class="token operator">&lt;</span>h1<span class="token operator">></span>Dashboard<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>
          <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/"</span> id<span class="token operator">=</span><span class="token string">"click-me"</span><span class="token operator">></span>
            Home
          <span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token punctuation">)</span>}
    <span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token comment">;</span>

<span class="token operator">/</span><span class="token operator">/</span> the actual test!
<span class="token function">it</span><span class="token punctuation">(</span><span class="token string">"navigates around"</span><span class="token punctuation">,</span> done <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token function">renderTestSequence</span><span class="token punctuation">(</span>{
    <span class="token operator">/</span><span class="token operator">/</span> tell it the subject you're testing
    subject<span class="token punctuation">:</span> App<span class="token punctuation">,</span>

    <span class="token operator">/</span><span class="token operator">/</span> <span class="token operator">and</span> the steps <span class="token keyword">to</span> execute each time the location changes
    steps<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token operator">/</span><span class="token operator">/</span> initial render
      <span class="token punctuation">(</span>{ history<span class="token punctuation">,</span> div }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
        <span class="token operator">/</span><span class="token operator">/</span> assert the screen says what we think it should
        console<span class="token punctuation">.</span><span class="token function">assert</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span>innerHTML<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token operator">/</span>Welcome<span class="token operator">/</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">;</span>

        <span class="token operator">/</span><span class="token operator">/</span> now we can imperatively navigate as the test
        history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">"/dashboard"</span><span class="token punctuation">)</span><span class="token comment">;</span>
      }<span class="token punctuation">,</span>

      <span class="token operator">/</span><span class="token operator">/</span> second render from new location
      <span class="token punctuation">(</span>{ div }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
        console<span class="token punctuation">.</span><span class="token function">assert</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span>innerHTML<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token operator">/</span>Dashboard<span class="token operator">/</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">;</span>

        <span class="token operator">/</span><span class="token operator">/</span> <span class="token operator">or</span> we can simulate clicks on Links instead of
        <span class="token operator">/</span><span class="token operator">/</span> using history<span class="token punctuation">.</span>push
        Simulate<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#click-me"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> {
          button<span class="token punctuation">:</span> <span class="token number">0</span>
        }<span class="token punctuation">)</span><span class="token comment">;</span>
      }<span class="token punctuation">,</span>

      <span class="token operator">/</span><span class="token operator">/</span> final render
      <span class="token punctuation">(</span>{ location }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
        console<span class="token punctuation">.</span><span class="token function">assert</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>pathname <span class="token operator">==</span><span class="token operator">=</span> <span class="token string">"/"</span><span class="token punctuation">)</span><span class="token comment">;</span>
        <span class="token operator">/</span><span class="token operator">/</span> you'll want something like `<span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span>` so your test
        <span class="token operator">/</span><span class="token operator">/</span> fails <span class="token keyword">if</span> you never make it here<span class="token punctuation">.</span>
        <span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">;</span>
      }
    <span class="token punctuation">]</span>
  }<span class="token punctuation">)</span><span class="token comment">;</span>
}<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre></article></div><aside class="main_toc_container nav_link_container"><div class="main_toc"><nav class="toc"><ol><li><a href="#%E6%B5%8B%E8%AF%95">测试</a><ol><li><a href="#%E4%BB%8E%E7%89%B9%E5%AE%9A%E8%B7%AF%E7%94%B1%E5%BC%80%E5%A7%8B">从特定路由开始</a></li><li><a href="#%E5%AF%BC%E8%88%AA">导航</a></li></ol></li></ol></nav></div></aside></section><footer>Powered by&amp;nbsp;<a href="https://github.com/xcatliu/pagic" target="_blank">Pagic</a></footer><div class="tools flex_center hide_on_mobile"><a class="czs-pen button" href="https://github.com/frisktale/react_router_chinese/edit/master/./guides/Testting.md" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-pen.svg&quot;)"></a><a class="czs-angle-up-l button" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></a></div><script src="https://cdn.pagic.org/react@17.0.2/umd/react.production.min.js"></script><script src="https://cdn.pagic.org/react-dom@17.0.2/umd/react-dom.production.min.js"></script><script type="module" src="/react_router_chinese/index.js"></script></body></html>